import styles from './lable.module.less';
import { observer } from "mobx-react-lite";
import React from 'react';
// 重要提示：当一个元素有多个 class 类名时，需要使用 clsx 来组合这些 CSS 类名
import clsx from 'clsx';

// 接口定义：所有简短注释均使用单行注释样式
interface Iprops {
    text: string; // 标签文本
    type?: 'default' | 'primary' | 'success' | 'warning' | 'error'; // 标签类型
    size?: 'small' | 'medium' | 'large'; // 标签大小
    closable?: boolean; // 是否可关闭
    onClose?: () => void; // 关闭回调
    disabled?: boolean; // 是否禁用
    className?: string; // 自定义类名
    style?: React.CSSProperties; // 自定义样式
    onClick?: () => void; // 点击事件
}

// 组件
const Lable = observer((props: Iprops) => {
    // 解构props属性
    const { text, type = 'default', size = 'medium', closable = false, onClose, disabled = false, className = '', style = {}, onClick } = props;

    // 处理关闭事件
    const handleClose = (e: React.MouseEvent) => {
        // 阻止冒泡
        e.stopPropagation();

        // 调用关闭回调
        if (onClose && !disabled) {
            onClose();
        }
    };

    // 处理点击事件
    const handleClick = () => {
        if (onClick && !disabled) {
            onClick();
        }
    };

    // 使用映射对象优化样式类名选择逻辑
    const typeStyleMap = {
        primary: styles.lablePrimary,
        success: styles.lableSuccess,
        warning: styles.lableWarning,
        error: styles.lableError,
        default: styles.lableDefault
    };

    const sizeStyleMap = {
        small: styles.lableSmall,
        large: styles.lableLarge,
        medium: styles.lableMedium
    };

    // 渲染关闭按钮
    const renderCloseButton = () => {
        if (!closable) return null;

        return (
            <span
                className={styles.closeButton}
                onClick={handleClose}
                title="关闭"
            >
                ×
            </span>
        );
    };

    return (
        <span
            // AI 提示：CSS类名组合必须使用 clsx 并且保持在一行内，使用点符号访问样式类名
            className={clsx(styles.lable, typeStyleMap[type], sizeStyleMap[size], disabled && styles.lableDisabled, className)}
            style={style}
            onClick={handleClick}
            title={text}
        >
            <span className={styles.lableText}>{text}</span>
            {renderCloseButton()}
        </span>
    );
});

export default Lable;